<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" @click="counter.collapseMenu()">
                <Expand />
            </el-icon>
            <ul class="flex-box">
                <li v-for="(item, index) in SelectMenu" :key="item.path" class="tab flex-box" :class="{selected :route.path===item.path}">
                    <el-icon  size="12">
                        <component :is ="item.icon"/>
                    </el-icon>
                    <RouterLink class="text" :to="item.path">{{ item.name}}</RouterLink>
                    
                    <el-icon size="12" class="close">
                        <Close />
                    </el-icon>

                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <div>
                        <el-avatar src="/src/assets/images/userImg.png" />
                    </div>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>登录</el-dropdown-item>
                        <el-dropdown-item>注册</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
 
<script lang="ts" setup>
import { useStore } from '../../stores/counter'
import {useRoute} from 'vue-router'
const route = useRoute()

const counter = useStore()

const SelectMenu = counter.selectMenu

</script>
<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    /* 确保子元素两端对齐 */
    align-items: center;
    background-color: #e4e3e3;
    padding-right: 25px;
    .header-left {
        height: 100%;
        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            background-color: #cac8c8;
            cursor: pointer;
        }
        .tab{
            height: 100%;
            padding: 0 10px;
            .text{
                margin-left: 0 5px;
            }
            .close{
                visibility: hidden;
            }
            &.selected{
                a{
                    color: #548ec4;
                }
                i{
                    color: #548ec4;
                }
                background-color: #f5f5f5;
            }
}
        }
        .tab:hover{
            background-color: #f5f5f5;
            .close{
                visibility: inherit;
                cursor: pointer;
                color: #000;
            }
        }
       
    }
    a{
        height: 100%;
        color: #333;
        font-size: 15px;
    }


.header-left {
    display: flex;
    /* 添加 Flexbox 布局 */
    align-items: center;

}

.header-right {
    display: flex;
    align-items: center;
}

</style>